<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <!-- 使用局部子组件 -->
        <partchild1 @transfer="getvalue" ref="p1"></partchild1>

        <ul v-if="userArr.length>0">
            <li v-for="(item,index) in userArr" :key="index">{{item}}</li>
        </ul>
    </div>
</body>

</html>
<script>
    //  父子组件传值 : 子传父
    //  方式1: 使用自定义事件 this.$emit()
    //  子组件传递数据,需要给子组件绑定事件,然后在事件执行函数中,使用this.$emit(自定义事件,传递的数据)
    // 注意: 自定义事件不要和原生的事件重名


    //  方式2: 使用ref属性 子传父
    // 语法: 在父组件中,给子组件绑定上绑定一个ref 属性, 然后通过this.$refs.ref属性获取到子组件的实例对象
    // 进而可以操作子组件上的所有的数据和方法啦


    // 使用this.$emit() 实现父传子
    // 使用$emit()方法, 将子组件中的函数传给父组件, 然后在父组件中调用,然后实参就是父组件中的数据,
    // 这样就可以在子组件中的方法中获取到父组件的数据了.


    const app = Vue.createApp({
        data() {
            return {
                userArr: [],
                userObj: {
                    name: "宋准",
                    age: 20
                }
            }
        },
        mounted() {
            console.log(11, this);
            // 访问子组件的实例对象
            console.log(22, this.$refs.p1.nameArr);

        },
        methods: {
            getvalue(params) {
                console.log(33, params);
                // this.userArr = params

                params(this.userObj)
            }
        },
        components: {
            partchild1: {
                template: `<div @click='emitFn'>{{title}}</div>`,
                data() {
                    return {
                        title: '我是局部子组件1',
                        nameArr: ['李元霸', '宇文成都', '裴元庆']
                    }
                },
                methods: {
                    childFn(obj) {
                        console.log('我是子组件中的方法函数');
                        console.log(obj);
                    },
                    emitFn() {
                        // console.log(this);
                        // this.$emit('transfer', this.nameArr)
                        this.$emit('transfer', this.childFn)
                    }
                }
            }
        }
    }).mount('#app')

</script>